<template>
  <div>
    <table>
      <caption>
        欢迎光临_vue开发的收银系统_水果店
      </caption>
      <tr>
        <td>苹果10元/斤 折扣&lt;8&gt;折</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数<input v-model="num" type="number" /></td>
      </tr>
      <tr>
        <td><button @click="payFn">结账买单</button></td>
      </tr>
      <tr>
        <td>
          结账单:总价{{ total }}¥元,折后价{{ cheap }}¥元,省了{{ save }}¥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      total: "",
      cheap: "",
      save: "",
    };
  },
  methods: {
    payFn() {
      this.total = this.num * 10;
      this.cheap = this.num * 10 * 0.8;
      this.save = this.total - this.cheap;
    },
  },
};
</script>

<style>
table {
  width: 600px;
  border-collapse: collapse;
  margin: 100px auto;
}

tr {
  width: 100%;
  border: 1px solid #111;
  text-align: center;
  font-weight: 700;
}
</style>
